import {messages} from "share/common";
import React, {Component} from 'react';
import {connect} from "react-redux";
import {Button, Tabs, message} from "antd";
import Condition from "components/condition";
import SetExpenseType from "./set-expense-type";
import AssociatedList from "./associated-list";
import taxCodeService from "../../tax-code.service"
import "styles/finance-setting/tax-code/tax-code/invoice-type/expense-invoice-mapping.scss";

const TabPane = Tabs.TabPane;
const { If } = Condition;

@connect(mapStateToProps)
class ExpenseInvoiceMapping extends Component {

  state = {
    loading: false,
    tabKey: 'expense-type-setting'
  };

  handleSave = () => {
    const { record, ruleId } = this.props;
    const { whiteListData, blackListData, blackListType } = this.listRef.state;
    this.basicRef.props.form.validateFieldsAndScroll((err, values) => {
      if (err) {
        this.setTabKey('expense-type-setting');
      } else {
        if (whiteListData.length === 0) {
          message.error(messages('expense-14.key556')/*请添加白名单*/);
          this.setTabKey('associated-list');
          return;
        }
        if (blackListType === "CUSTOM" && blackListData.length === 0) {
          message.error(messages('expense-14.key557')/*请添加黑名单*/);
          this.setTabKey('associated-list');
          return;
        }
        values.expReceiptMappingId = ruleId;
        values.expReceiptMappingItemId = record.expReceiptMappingItemId;
        values.blackListType = blackListType;
        values.whiteList = whiteListData;
        values.blackList = blackListData;
        this.setState({ loading: true });
        taxCodeService.updateMappingItem(values)
          .then(() => {
            message.success(messages('expense-14.key558')/*保存成功*/);
            this.props.close(true);
          })
          .finally(() => {
            this.setState({ loading: false });
          })
      }
    })
  };

  renderTabs = () => {
    let tabs = [{
      key: 'expense-type-setting',
      name: messages('expense-14.key559')/*1.设置费用类型*/,
    }, {
      key: 'associated-list',
      name: messages('expense-14.key560')/*2.关联黑白名单*/,
    }];
    return (
      tabs.map(tab => <TabPane tab={tab.name} key={tab.key}/>)
    );
  };

  setTabKey = tabKey => this.setState({ tabKey });

  render() {
    const { loading, tabKey } = this.state;
    const { ruleInfo, record, authPolicyAll } = this.props;
    return (
      <div className="expense-invoice-mapping">
        <Tabs activeKey={tabKey} onChange={this.setTabKey}>
          {this.renderTabs()}
        </Tabs>
        <div className="expense-invoice-mapping-content">
          <div style={{ overflow: 'hidden', height: tabKey === 'expense-type-setting' ? 'auto' : 0 }}>
            <SetExpenseType
              wrappedComponentRef={inst => this.basicRef = inst}
              ruleInfo={ruleInfo}
              record={record}
              disabled={!authPolicyAll}
            />
          </div>
          <div style={{ overflow: 'hidden', height: tabKey === 'associated-list' ? 'auto' : 0 }}>
            <AssociatedList
              ref={inst => this.listRef = inst}
              record={record}
              disabled={!authPolicyAll}
            />
          </div>
        </div>
        <div className="slide-footer">
          <If value={authPolicyAll}>
            <Button type="primary" loading={loading} onClick={this.handleSave}>{messages('expense-14.key388')/*确认*/}</Button>
          </If>
          <Button onClick={() => this.props.close()}>{messages('common.back')/*返回*/}</Button>
        </div>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    authPolicyAll: state.main.authPolicyAll
  }
}

export default ExpenseInvoiceMapping;
